<template>
  <div class="joint-box">
    <el-dialog
      v-model="jointDialogVisible"
      :append-to-body="true"
      destroy-on-close
      center
      width="60%"
      custom-class="joint-dialog"
      :before-close="handleClose"
    >
      <template #header>
        <div class="my-header">
          <div class="title-hr"></div>
          <div>
            <!-- <span class="title-top">调度方案名称-</span>
          {{ state.title }} -->
            设置联合调度
          </div>
        </div>
      </template>
      <div class="joint-content-box">
        <div class="content-item">
          <div class="title">调度区域：</div>
          <div class="check-box">
            <el-checkbox-group v-model="state.checkPort">
              <el-checkbox
                v-for="(item, index) in state.areaList"
                :label="item.rangeCode"
                :value="item.rangeCode"
                :key="item.rangeCode"
                @change="(val, $event) => handleChangePort(val, $event, item.id)"
                class="ckbox-border"
              >
                <p
                  @click.prevent="handleClickWord(item, index)"
                  :class="['word', state.wordIndex == index ? 'active' : '']"
                  style="line-height: 0.4375rem"
                >
                  {{ item.rangeName }}
                </p>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="content-item">
          <div class="title">相关区域的水利工程：</div>
          <div class="tables-box">
            <div class="table">
              <el-table :data="state.waterTableData" border style="width: 100%">
                <el-table-column prop="rangeName" label="区域名称" align="center" />
                <el-table-column prop="sttpName" label="工程类型(水库/闸/坝)" align="center" />
                <el-table-column prop="blknm" label="工程名称" align="center" />
              </el-table>
            </div>
            <!-- <div class="table">
              <el-table :data="state.gateTableData" border style="width: 100%">
                <el-table-column prop="areaName" label="区域名称" align="center" width="180" />
              </el-table>
            </div> -->
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSaveJoint">确定</el-button>
          <el-button type="info" @click="jointDialogVisible = false"> 取消 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const emit = defineEmits(['handleSaveJoint'])
import { getRanges } from '@/services/modules/model-config'
import { getRangeSections } from '@/services/modules/dispatch-manage'
const jointDialogVisible = ref(false)

const state = reactive({
  zoneId: '',
  //选中
  checkPort: [],
  wordIndex: '',
  waterTableData: [
    {
      areaName: '区域名称',
      waterName: '水库名称',
      gateName: '闸坝名称',
      type: '预报'
    },
    {
      areaName: '区域名称',
      waterName: '水库名称',
      gateName: '闸坝名称',
      type: '预报'
    },
    {
      areaName: '区域名称',
      waterName: '水库名称',
      gateName: '闸坝名称',
      type: '预报'
    }
  ],
  areaList: []
})
/**
 * 查看库群
 */
const getRangesList = (zoneId) => {
  getRanges({ zoneId }).then((res) => {
    if (res.code === 200) {
      let arr = []
      state.areaList = res.data
      state.areaList.forEach((item) => {
        arr.push(item.rangeCode)
      })
      state.checkPort = arr
      handleClickWord(state.areaList[0], 0)
    }
  })
}
/**
 * 保存
 */
const handleSaveJoint = () => {
  emit('handleSaveJoint', filterRangeCode(state.areaList, state.checkPort))
  jointDialogVisible.value = false
}
/**
 * filter
 * @params arr1 原数组 arr2 名字集合
 */
const filterRangeCode = (arr1, arr2) => {
  let arr = []
  arr1.forEach((element) => {
    arr2.forEach((child) => {
      if (element.rangeCode == child) {
        arr.push(element.rangeCode)
      }
    })
  })
  return arr && arr.join(',')
}
const handleOpenModal = (item) => {
  state.zoneId = item.zoneId
  state.checkPort = []
  jointDialogVisible.value = true
  getRangesList(item.zoneId)
}
/**
 * 点击复选框
 * @param item值
 */
const handleChangePort = (item) => {
  console.log(state.checkPort)
}
/**
 * 点击复选框文字
 * @param item值
 */
const handleClickWord = (item, index) => {
  state.wordIndex = index
  getRangeSections({ zoneId: state.zoneId, rangeCodes: item.rangeCode }).then((res) => {
    if (res.code === 200) {
      state.waterTableData = res.data
    }
  })
}
defineExpose({ handleOpenModal })
</script>

<style lang="less" scoped>
.joint-box {
  .joint-dialog {
  }
}
.joint-content-box {
  .content-item {
    &:nth-of-type(1) {
      display: flex;
      align-items: center;
      .title {
      }
      .check-box {
        .word {
          color: black;
          &.active {
            color: #4fc0f1;
          }
        }
      }
    }
  }
  .content-item {
    margin-top: 0.125rem;
    &:nth-of-type(2) {
      .tables-box {
        margin-top: 0.25rem;
        .table {
          height: 5rem;
          overflow-y: auto;
        }
        // display: flex;
        // justify-content: space-around;
      }
    }
  }
}
.el-dialog {
  .my-header {
    display: flex;
    align-items: center;
    padding-bottom: 0.0625rem;
    height: 0.4375rem;
    border-bottom: 0.025rem solid #eee;
    font-size: 0.2625rem;
    color: #4fc0f1;
    .title-hr {
      height: 0.225rem;
      border: #4fc0f1 0.025rem solid;
      margin-right: 0.125rem;
    }
    .title-top {
      color: #4fc0f1;
    }
  }
  .dialog-footer {
    text-align: center;
    .el-button {
      width: 1.875rem;
    }
  }
}
</style>
